<template>
  <div class="by-script-setup">
    <div v-show="loading">加载中...</div>
    <div v-show="!loading && !cartList.length">购物车为空</div>

    <div v-show="!loading">
      <div v-for="(item, index) in cartList" :key="index">
        id：{{ item.goodsId }} 名称：{{ item.goodsName }} 数量：{{
          item.number
        }}
        操作：
        <button @click="handleAddGoods(item)">+</button>
        &nbsp;&nbsp;
        <button @click="handleReduceGoods(item)">-</button>
        &nbsp;&nbsp;
        <button @click="handleRemoveGoods(item)">X</button>
      </div>
    </div>

    <div>
      <br />
      <input
        v-model="goodsForm.goodsName"
        type="text"
        placeholder="请输入名称"
      />
      <br />
      <input
        v-model="goodsForm.number"
        type="number"
        placeholder="请输入数量"
      />
      <br />
      <button @click="handleAddGoods()">添加</button>
    </div>

    <br />
    <button @click="config.isShowLink = !config.isShowLink">
      显示相关链接
    </button>
    <br />
    <button @click="handleInputClear">清空输入框</button>

    <HelloWorldByScriptSetup
      ref="helloWorld"
      v-model:msg="testAsync"
      :config="config"
      :list="list"
      @handle-input="handleInput"
    >
      <h1>测试默认插槽</h1>

      <template v-slot:test1>
        <h1>测试具名插槽</h1>
      </template>

      <template v-slot:testParam="{ param }">
        <h1>测试插槽参数：{{ param }}</h1>
      </template>
    </HelloWorldByScriptSetup>
  </div>
</template>

<style lang="scss" scoped>
.by-script-setup {
  background-color: #fff;
}
</style>

<script lang="ts">
// #region 导出
export default {
  name: "ByScriptSetup",
};
// #endregion
</script>

<script setup lang="ts">
// #region 导入
import { computed, onMounted, reactive, ref } from "vue";
import { useStore } from "vuex";
import { Goods } from "@/entity/Goods";
import HelloWorldByScriptSetup, {
  ConfigProp,
  ListProp,
  HelloWorldExpose,
} from "@/components/HelloWorldByScriptSetup/index.vue";

const store = useStore();
// #endregion

// #region 购物车相关

const loading = ref(false);
// 购物车列表
const cartList = computed(() => store.state.cart?.cartList || []);

// 获取购物车列表
function getCartList() {
  loading.value = true;
  return store
    .dispatch("cart/getCartList", {
      page: 1,
      limit: 10,
    })
    .finally(() => {
      loading.value = false;
    });
}

onMounted(getCartList);

// 表单
const goodsForm = reactive<Goods>({
  goodsId: 0,
  goodsName: "",
  number: 1,
});

// 重新设置表单
function resetGoodsForm() {
  goodsForm.goodsId = 0;
  goodsForm.goodsName = "";
  goodsForm.number = 1;
}

// 添加
function handleAddGoods(_goods?: Goods) {
  const goods = _goods || goodsForm;
  if (!goods.goodsName) {
    alert("请输入商品名称");
  } else if (goods.number < 1) {
    alert("请输入正确的数量");
  } else {
    // 如果没有 id，根据列表生成
    if (!goods.goodsId) {
      goods.goodsId = cartList.value.length + 1;
    }
    store.commit("cart/AddCartList", goods);
  }
  // 重新设置表单
  resetGoodsForm();
}

// 减少
function handleReduceGoods(goods: Goods) {
  store.commit("cart/reduceCartList", goods);
}

// 删除
function handleRemoveGoods(goods: Goods) {
  store.commit("cart/removeCartList", goods);
}

// #endregion

// #region HelloWorld 组件相关

const config = ref<ConfigProp>({
  isShowLink: false,
});

const list = ref<ListProp>([
  { id: 1, name: "fanzhiliang", age: 25 },
  { id: 2, name: "alcyh", age: 26 },
]);

// 监听输入框输入
function handleInput(val: string) {
  console.log(val);
}

const helloWorld = ref<HelloWorldExpose>();

function handleInputClear() {
  console.log("清空前的值：" + helloWorld.value?.getText());
  helloWorld.value?.handleInputClear();
}

// 测试 sync
const testAsync = ref("传递简单的参数");

// #endregion
</script>
